<template>
  <div class="service">
    <header>
        <div class="img1" @click="$router.go(-1)"></div>
        <span class="text1">中国联通服务与隐私协议条款</span>
    </header>

    <main>
      <ul>
        <li v-for="(item,index) in list" :key="index" class="title1">{{item.title}}
          <p class="border10">{{item.msg}}</p>
        </li>
      </ul>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          title: "一、【服务概述】",
          msg: "协议内容",
        },
        {
          title: "二、【用户个人信息保护】",
          msg: "个人信息",
        },
      ],
    };
  },
};
</script>

<style scoped lang="scss">
.service {
  display: flex;
  flex-direction: column;

  header {
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-bottom: 1px #bbb solid;

    .img1 {
      width: 19px;
      height: 35px;
      background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/pshvf6oyob5e2v34gvjdf963utrfrmi7si6b18e2f0-ee71-4c15-a09d-11de00a665d4) -1px -1px
        no-repeat;
      background-size: 20px 37px;
    }
    
    .text1 {
      color: rgba(112, 112, 112, 1);
      font-size: 32px;
      font-family: PingFangSC-Regular;
      margin-right: 100px;
    }
  }

  main{
    flex: 1;

    .title1{
      font-size: 32px;
      margin: 30px;
      font-weight: 800;
    }

    .border10{
      text-align: center;
      width: 100%;
      height: 800px;
      border: 1px #bbb solid;
      line-height: 800px;
      margin-top: 20px;
      font-weight: 400;
    }
  }
}
</style>